<template>
  <div class="bg">
    <SearchBar></SearchBar>
    <div class="container">
      <div class="left">
        <div class="top">
          <div class="section">
            <el-tabs v-model="activeName" @tab-click="handleClick">
              <el-tab-pane label="热门圈子" name="first">
                <div class="group">
                  <div
                    v-for="(item, index) in group_list"
                    :key="index"
                    class="shop"
                  >
                    <div>
                      <img :src="api_url + item.groupImage" class="image" />
                      <div style="padding: 14px; text-align: center">
                        <h1>{{ item.name }}</h1>

                        <div cslass="bottom clearfix">
                          <span type="text" class="span">去看看</span>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </el-tab-pane>
              <el-tab-pane label="我的" name="second"></el-tab-pane>
            </el-tabs>
          </div>
        </div>
        <div class="middle">
          <!-- <div class="page">
            <el-pagination background layout="prev, pager, next" :total="100">
            </el-pagination>
          </div> -->
          <div class="hei">
            <h1>大家都在聊...</h1>

            <fc-3d-btn @click="dialogVisible = true">
              <i class="el-icon-edit"></i>我要发帖
            </fc-3d-btn>
          </div>

          <el-dialog
            title="写 帖 子"
            :visible.sync="dialogVisible"
            width="50%"
            height="50%"
            :before-close="handleClose"
          >
            <el-form ref="form" :model="form" label-width="80px">
              <el-form-item label="帖子标题">
                <el-input v-model="form.title"></el-input>
              </el-form-item>
              <el-form-item label="帖子内容">
                <el-input type="textarea" v-model="form.desc"></el-input>
              </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
              <el-button type="primary" @click="addPost">
                发 布 帖 子
              </el-button>
            </span>
          </el-dialog>
        </div>
        <div class="bot">
          <div class="post" v-for="item in post_list" :key="item.id">
            <div class="personInfo">
              <div class="avatarDiv">
                <el-avatar :src="api_url + item.avatar"></el-avatar>
                <span class="span">{{ item.nickname }}</span>
              </div>

              <fc-bubbles :active="`item.isAttention`">
                <fc-parenthesis-btn
                  style="
                    :host {
                      color: #333;
                    }
                  "
                  @click="switchFollow(item.isAttention, item.userId)"
                >
                  <div v-if="!item.isAttention">
                    <i class="el-icon-plus"></i>关注
                  </div>
                  <div v-else>已关注</div>
                </fc-parenthesis-btn>
              </fc-bubbles>
            </div>

            <div class="content">
              <p>{{ item.content }}</p>
            </div>

            <!--点赞收藏-->
            <!--        <div class="good">-->
            <!--          <div class="somebtn">-->
            <!--            <div class="heart-btn">-->
            <!--              <label for="check1">-->
            <!--                <div class="heart-btn-svg">-->
            <!--                  <input type="checkbox" id="check1" hidden>-->
            <!--                  <svg t="1652166939848" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3393" width="30" height="30" style="margin-top: 3       px;"><path d="M512 950.848q-14.848 0-25.152-10.272l-356.576-344q-5.728-4.576-15.712-14.848t-31.712-37.44-38.848-55.712-30.56-69.152-13.44-78.848q0-125.728 72.576-196.576t200.576-70.848q35.424 0 72.288 12.288t68.576 33.152 54.56 39.136 43.424 38.848q20.576-20.576 43.424-38.848t54.56-39.136 68.576-33.152 72.288-12.288q128 0 200.576 70.848t72.576 196.576q0 126.272-130.848 257.152l-356 342.848q-10.272 10.272-25.152 10.272z" p-id="3394" id="heart"></path></svg>-->
            <!--                  <span class="heart-btn-span"></span>-->
            <!--                </div>-->
            <!--              </label>-->
            <!--            </div>-->
            <!--            <div class="star-btn">-->
            <!--              <label for="check2">-->
            <!--                <div class="heart-btn-svg">-->
            <!--                  <input type="checkbox" id="check2" hidden>-->
            <!--                  <svg t="1652170277721" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4284" width="30" height="30"><path d="M956.741665 419.885046c-5.241374-16.200984-19.178805-28.054963-36.034704-30.496571l-254.931157-44.791136L551.77233 115.15981c-7.444553-15.248286-22.992667-24.898063-40.025599-24.898063-17.036002 0-32.522718 9.648754-40.146349 24.898063L357.655238 344.597339 102.784456 390.936737c-16.856923 2.442632-30.852682 14.295588-36.035728 30.496571-5.300726 16.141632-0.893346 33.951253 11.317767 45.804209l184.407963 170.410158-48.186466 247.662613c-2.859118 16.737196 3.930519 33.833573 17.809621 43.720757 13.244652 13.244652 40.562834 6.90834 47.053666 3.514033l232.595452-113.64634L742.85225 932.545078c6.490831 3.394307 32.166607 11.373025 47.052642-3.514033 13.760398-9.887184 20.787442-26.982538 17.869996-43.720757L761.077334 637.647675l184.467315-172.018795C957.69641 453.836299 962.043415 436.026678 956.741665 419.885046z" p-id="4285" id="star"></path></svg>-->
            <!--                  <span class="star-btn-span"></span>-->
            <!--                </div>-->
            <!--              </label>-->
            <!--            </div>-->
            <!--            <div class="reward-btn">-->
            <!--              <label for="check3">-->
            <!--                <div class="heart-btn-svg">-->
            <!--                  <input type="checkbox" id="check3" hidden>-->
            <!--                  <svg t="1652172888523" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="11294" width="30" height="30"><path d="M832.032253 127.978498l-639.892491 0c-52.980346 0-95.983874 43.003528-95.983874 95.983874l0 511.913993c0 52.980346 43.003528 95.983874 95.983874 95.983874l210.717285 0 86.695112 86.695112c6.192508 6.192508 14.449185 9.460776 22.705863 9.460776s16.341341-3.096254 22.705863-9.460776l86.695112-86.695112 210.717285 0c52.980346 0 95.983874-43.003528 95.983874-95.983874L928.360155 223.962372C928.016126 170.982026 884.840585 127.978498 832.032253 127.978498zM335.943558 511.913993c-26.490173 0-47.991937-21.501764-47.991937-47.991937s21.501764-47.991937 47.991937-47.991937 47.991937 21.501764 47.991937 47.991937S362.433731 511.913993 335.943558 511.913993zM527.911305 511.913993c-26.490173 0-47.991937-21.501764-47.991937-47.991937s21.501764-47.991937 47.991937-47.991937 47.991937 21.501764 47.991937 47.991937S554.401478 511.913993 527.911305 511.913993zM720.051067 511.913993c-26.490173 0-47.991937-21.501764-47.991937-47.991937s21.501764-47.991937 47.991937-47.991937c26.490173 0 47.991937 21.501764 47.991937 47.991937S746.369226 511.913993 720.051067 511.913993z" p-id="11295" id="reward"></path></svg>-->
            <!--                  <span class="reward-btn-span"></span>-->
            <!--                </div>-->
            <!--              </label>-->
            <!--            </div>-->
            <!--           -->
            <!--          </div>-->

            <!--        </div>-->
            <!--点赞收藏-->

            <div class="good">
              <div class="thumb">
                <i class="el-icon-thumb">&nbsp;{{ item.likeCount }}</i
                >&nbsp;&nbsp;&nbsp;
              </div>
              <div class="star">
                <i class="el-icon-star-off">&nbsp;{{ item.star }}&nbsp;收藏</i>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="right">
        <div class="right1">
          <h1 style="color: #fff">好车推荐</h1>
          <h3>换一换<i class="el-icon-refresh"></i></h3>
        </div>
        <div class="right2" v-for="i in 4" :key="i">
          <span>张振坤，你是我的神</span>
          <div class="answer">
            <el-tag size="mini">标签一</el-tag>
            <span style="font-size: small">4次回答</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex";
import SearchBar from "@/components/querypage/SearchBar.vue";
export default {
  name: "FormView",

  computed: {
    ...mapState(["token", "uid", "api_url"]),
  },

  data() {
    return {
      activeName: "first",
      url: "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
      dialogVisible: false,

      // 车友圈数组
      group_list: [],

      // 帖子数组
      post_list: [],

      // 好车推荐数组
      car_lsit: [],

      form: {
        title: null,
        desc: null,
      },
    };
  },

  methods: {
    handleClick(tab, event) {
      console.log(tab, event);
    },

    handleClose() {
      return true;
    },

    switchFollow(isAttention, authorId) {
      if (isAttention) {
        // 如果已关注(isAttention为1),调用取消关注
      } else {
        // 如果未关注(isAttention为0),调用关注
        this.axios
          .post(
            "/forum/add_follow",
            { authorId: authorId, userId: this.uid },
            {
              headers: {
                // 设置请求头
                Authorization: `${this.token}`,
              },
            }
          )
          .then((res) => {
            console.log(res);
            this.getPostList(this.group_list.id);
          });
      }
    },

    //获取车友圈列表数据
    getForumList() {
      let forumList;
      this.axios.get("/forum/get_list").then((res) => {
        forumList = res.data.data;
        // console.log(forumList);
        this.group_list = forumList[0];
        this.getPostList(this.group_list.id);
      });
    },

    getPostList(groupId) {
      this.axios
        .get(
          `/forum/listDetails-by-groupId?groupId=${groupId}&userId=${this.uid}`,
          {
            headers: {
              // 设置请求头
              Authorization: `${this.token}`,
            },
          }
        )
        .then((res) => {
          this.post_list = res.data.data;
        });
    },

    // 发布帖子
    addPost() {
      let form_data = {
        userId: this.uid,
        title: this.form.title,
        content: this.form.desc,
      };
      this.axios
        .post("/forum/add-post", `${JSON.stringify(form_data)}`, {
          headers: {
            // 设置请求头
            "Content-Type": "application/json",
            Authorization: `${this.token}`,
          },
        })
        .then((res) => {
          if (res.data.status == 20000) {
            this.$message({
              message: "发布成功！",
              type: "success",
              duration: 1500,
            });
            this.dialogVisible = false;
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
  },

  created() {
    this.getForumList();
  },
  components: { SearchBar },
};
</script>

<style lang="scss">
.bg {
  background-color: #333;
  padding-top: 90px;

  .container {
    display: flex;
    align-items: flex-start;
    justify-content: center;
  }

  .post {
    margin-bottom: 10px;
  }

  .good {
    display: flex;
    justify-content: right;
    padding: 18px;
    padding-right: 40px;
  }

  .answer {
    margin: 12px 0;
    display: flex;
    justify-content: space-between;
  }

  .right2 {
    background-color: #fff;
    width: 23vw;
    margin: 12px auto;
    transition: 0.3s;
  }

  .right2:hover {
    box-shadow: 0 0 10px 3px rgba(0, 0, 0, 0.8);
  }

  .right1 {
    display: flex;
    justify-content: space-between;
    margin: 12px 10px 12px 10px;
  }

  .shop {
    display: inline-block;
    margin: 0.8vw 0.65vw 0.2vw 0.2vw;
    background-color: white;
    width: 11vw;
    transition: 0.3s;
  }

  .shop:hover {
    box-shadow: 0 0 15px 5px rgba(0, 0, 0, 0.8);
  }

  .top {
    background-color: #303133;
  }

  .hei {
    /* margin-right: 10px; */
    background-color: #303133;
  }

  .group h1 {
    color: #606266;
  }

  .hei > h1 {
    color: #b1b1b1;
    margin-left: 10px;
  }

  fc-3d-btn {
    margin: 10px;
    --shadow-color: rgb(89, 100, 122);
    --cover-color: rgb(231, 224, 173);
    --inset-shadow-color: rgb(245, 243, 239);
    --color: #333;
    color: #fff;
  }

  .hei,
  .personInfo {
    display: flex;
    justify-content: space-between;
    background-color: #464646;
  }

  .personInfo {
    .avatarDiv {
      margin-top: 5px;
      margin-left: 10px;
      margin-bottom: 10px;
      display: flex;
      align-items: center;
    }

    .span {
      display: inline-block;
      color: #e4e4e4;
      margin-left: 8px;
    }
  }

  .page {
    display: flex;
    flex-direction: row-reverse;
  }

  .el-button {
    margin-top: 12px;
  }

  .middle {
    background-color: #303133;
  }

  .middle,
  .post,
  .content {
    margin-top: 12px;
    margin-right: 10px;
    margin-left: 10px;
    background-color: white;
    border-radius: 6px;

    P {
      text-align: left;
    }
  }

  .image {
    width: 100%;
  }

  .left {
    width: 50vw;
    background-color: #333;
  }

  .right {
    width: 25vw;
    background-color: #606266;
  }

  .right,
  .left {
    float: left;
  }

  .section {
    margin: 0 20px;
  }

  /* 按钮 */
  fc-parenthesis-btn {
    --color: #fff;
    margin: 10px;
  }

  .el-tabs__item {
    color: #fff;
  }

  .el-tabs__item.is-active {
    color: #f0e68c;
  }

  .el-tabs__active-bar {
    color: #f0e68c;
  }

  .span {
    color: #fff;
    text-shadow: 1px 1px 1px #303133;
  }

  .star,
  .thumb {
    cursor: pointer;
  }

  .el-dialog__body {
    padding-bottom: 0px;
  }
}
/*  点赞收藏*/
</style>
